<template>
  <div class="mainbox">
    <dt-dialog title="详情" :visible.sync="dialogVisible" :is-loading="loading"
               :footer-slot="true">
      <div slot="content">
        <el-form ref="detailForm" :model="detailForm" :rules="rules"
                 label-width="80px" disabled>
          <el-form-item label="消息标题" prop="messageTitle">
            <el-input v-model.trim="detailForm.messageTitle" type="textarea" show-word-limit
                      class="limit" autosize />
          </el-form-item>
          <el-form-item label="消息内容" prop="messageContent">
            <el-input v-model.trim="detailForm.messageContent" type="textarea" show-word-limit
                      class="limit" autosize />
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12" :xs="24">
              <el-form-item label="发送渠道" prop="channelSdkName">
                <el-input v-model.trim="detailForm.channelSdkName" class="limit" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :xs="24">
              <el-form-item label="发送状态" prop="sendStatus">
                <el-select v-model.trim="detailForm.sendStatus" style="width:100%">
                  <el-option
                    v-for="dict in dict.type.sendStatus"
                    :key="dict.value"
                    :label="dict.label"
                    :value="parseInt(dict.value)"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :xs="24">
              <el-form-item label="发送方" prop="sender">
                <el-input v-model.trim="detailForm.sender" class="limit" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :xs="24">
              <el-form-item label="接收方" prop="receiver">
                <el-input v-model.trim="detailForm.receiver" class="limit" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-table ref="table" border highlight-current-row
                      :header-cell-style="{ backgroundColor: '#f2f2f2'}" :data="detailForm.messageLogList">
              <template slot="empty">
                <p>{{ $store.getters.dataText }}</p>
              </template>
              <el-table-column fixed="left" label="发送次数" show-overflow-tooltip
                               align="center" prop="sendTimes" type="index"
                               width="100" />
              <el-table-column key="sendTime" label="发送时间" show-overflow-tooltip
                               align="center" prop="sendTime" width="180">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.sendTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                </template>
              </el-table-column>
              <el-table-column key="sendStatus" label="发送结果" show-overflow-tooltip
                               align="center" prop="sendStatus">
                <template slot-scope="scope">
                  <dt-dict-tag :options="dict.type.sendStatus" :value="scope.row.sendStatus" />
                </template>
              </el-table-column>
              <el-table-column key="failReason" label="失败原因" show-overflow-tooltip
                               align="center" prop="failReason" />
              <el-table-column key="remark" label="备注" show-overflow-tooltip
                               align="center" prop="remark" />
            </el-table>
          </el-form-item>
        </el-form>
      </div>
    </dt-dialog>
  </div>
</template>
<script>
import { messageDetail } from '@/framework/api/messageCenter/messageLog'

export default {
  dicts: ['sendStatus'],
  data() {
    return {
      dialogVisible: false,
      loading: true,
      detailForm: {
        messageTitle: '',
        messageContent: '',
        channelSdkName: '',
        sendStatus: '',
        sender: '',
        receiver: '',
        messageLogList: []
      },
      rules: {}
    }
  },
  methods: {
    detail(row) {
      this.dialogVisible = true
      this.reset()
      const { messageId } = row
      messageDetail(messageId).then((res) => {
        this.detailForm = res.data
      })
    },
    reset() {
      this.detailForm = {
        messageTitle: '',
        messageContent: '',
        channelSdkName: '',
        sendStatus: '',
        sender: '',
        receiver: '',
        messageLogList: []
      }
      this.resetForm('detailForm')
    }
  }
}
</script>
<style lang="scss" scoped>
.table .el-table-column{
  border-left: 1px solid #EBEEF5 !important;
}

</style>
